Skip to main content

ComponentTests

Grouped Vertical Bar Chart – Component test plan

Sub-components: Bar, Legends, Callout, Labels

  1. Bar: Bar data, Bar color, bar label
  2. Legends: show/hide legends, highlight the corresponding bar on legend hover
  3. Callout: Default/custom callout
  4. Labels: x-Axis labels default/rotated
Test stepsValidationTool used
Test 1: [Snapshot testing]
- With only data prop, string data on x-axis.Renders GroupedVerticalBar chart correctlyEnzyme
- With HideLegend prop set to “true”Should hide legendsEnzyme
- With HideTooltip prop set to “true”Should hide the tooltip in chartEnzyme
- With EnabledLegendsWrapLines set to “true”Should enable the legends to wrap lines if there is not enough space to show all legends on a single lineEnzyme
- With ShowXAxisLablesTooltip set to “true”Should truncate x axis labels and show tooltip on x axis labelsEnzyme
- With WrapXAxisLables set to “true”Should wrap x axis label valuesEnzyme
- With yAxisTickFormat set to “%d”

Should render the y-axis ticks in the format specified

Enzyme
- With hideLabels set to “true”Should hide bar labelsRTL
- With yAxisTickCountShould render y axis with specific tick countRTL
Test 2: Basic props testing
- HideLegend prop set to “true”Should not mount legend when hideLegend is trueEnzyme
- HideLegend prop set to “false”Should mount legend when hideLegend is falseEnzyme
- HideTooltip prop set to “true”Should not mount callout when hideTootip is trueEnzyme
- HideTooltip prop set to “false”Should mount callout when hideTootip is falseEnzyme
- onRenderCalloutPerDataPoint is givenShould render onRenderCalloutPerDataPointEnzyme
- onRenderCalloutPerDataPoint is not givenShould not render onRenderCalloutPerDataPointEnzyme
Test 3: Render calling with respective to props
- No prop changes: Mount grouped vertical bar chart and then set the same props againRender function should have been called twiceEnzyme
- Prop changes: Mount grouped vertical bar chart and then set some other propRender function should have been called twiceEnzyme
Test 4: Mouse events
- Mouse over on a barShould render callout correctly on mouseoverEnzyme
- Mouse move from one bar to other barShould render callout correctly on mouse moveEnzyme
- Mouse over on a bar with customized calloutShould render customized callout on mouseoverEnzyme
Test 6: [Sub-Component]: Bar
- Specify bar colorShould render bar with the specified colorRTL
- with custom accessibility dataShould render bars with custom accessibility dataRTL
Test 7: [Sub-Component]: Legends
- Hide legendsShould not show any rendered legendsRTL
- Hover mouse over bar legendsShould reduce the opacity of the other barsRTL
- Mouse move from one Legend to another LegendShould reset the opacity of the lines on mouse leave a bar legendRTL
- Single mouse click on bar legendsShould select legend on single mouse click on respective legendRTL
- Double mouse click on bar legendsShould deselect legend on double mouse click on respective legendRTL
Test 8: [Sub-Component]: Callout
- Hover mouse over a barShould show the default callout over that barRTL
- Set isCalloutForStack is “true” and mouse over on a barShould show the default stacked callout over that barRTL
- Set isCalloutForStack is “false” and mouse over on a barShould show the single callout over that barRTL
- Specify custom callout and hover mouse over a barShould show the custom callout over that barRTL
Test 9: [Sub-Component]: x-axis labels
- Truncate x-axis labelsShould show the x-axis labels tooltip when hoveredRTL
- Rotate x-axis labelsShould rotate the x-axis labels by 45 degreesRTL
- Set showXAxisLablestoolTip to “true” and mouse over on labelShould show XAxis labels tooltip when mouse over on labelRTL
Test 10: [Sub-Component]: Screen resolution
- Increase the screen resolution (zoom in)Should remain unchanged on zoom inRTL
- Decrease the screen resolution (zoom out)Should remain unchanged on zoom outRTL
Test 11: Theme changed to Dark ThemeShould reflect theme changeRTL
Test 10: Grouped vertical bar chart re-rendering
- Update chart dataShould re-render chart when data is updatedRTL
Test 11: Grouped vertical bar chart with empty/proper data
- Chart with Empty dataShould render chart with Empty chart are labelEnzyme
- Chart with proper dataShould not render chart with empty chart are labelEnzyme